
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">

    <title>登录</title>

    <!-- Bootstrap core CSS -->
  	<link href="/webjars/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
    <div class="container" style='width:300px'>

   
      
     <form class="form-signin" onsubmit="return false">
	  <h1 class="h3 mb-3 font-weight-normal" align="center">请登录</h1>
	 <h5 align="center"> <label style='color:red' id='errorMsg'></label></h5>
	  <input id="userName" class="form-control" placeholder="用户名" onfocus="clearMsg()"  value='admin'>
	  <input type="password" id="passwd" class="form-control" placeholder="密码" onfocus="clearMsg()" value='admin'>
	  <div class="checkbox mb-3">
	    <label>
	      <input type="checkbox" id="remeberMe" value='1'> 记住我
	    </label>
	  </div>
	  <button class="btn btn-lg btn-primary btn-block" onclick="doSubmit()">登录</button>
	</form>

    </div> 


   <script src="/webjars/jquery/1.10.1/jquery.min.js"></script>
  </body>
</html>

<script>
function clearMsg(){
	$("#errorMsg").text("");
}

function doSubmit(){
    var userName=$("#userName").val();
    var passwd=$("#passwd").val();
    if(!userName||!passwd){
    	$("#errorMsg").text("用户名和密码不能为空");       
        return false;
    }

    var data="userName="+userName;
    data+="&passwd="+passwd;
    
    if($("#remeberMe").is(':checked')){
    	data+="&remeberMe=1";
    }else{
    	data+="&remeberMe=0";
    }
    
	$.ajax({
		type : "post",
		url : "/getToken",
		data : data,
		error : function(request, textStatus) {
        	window.prompt("ajaxError:"+request.status+","+request.readyState+","+textStatus,url);
		},
		success : function (resp) {
			if(resp.success){
				if(resp.data.message=='success'){
					self.location.href='/index';
					return;
				}else{
					$("#errorMsg").text(resp.data.message);         
				}
			}
        }
	});
	return false;
}

$(function () {
    var wheight = $(window).height();    //浏览器的高度
	var boxheight = $(".container").height();     //box的高度
	//浏览器的高度若大于box的高度，才设置box垂直居中

	if(wheight > boxheight){            
		var h = (wheight -boxheight)/2;         //计算box距顶端的距离
		$(".container").css("margin-top" ,h+"px")   //设置box的margin-top属性

	}
})
</script>
